<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>香港疫情实时监控大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
            color: #fff;
            overflow: hidden;
        }

        .dashboard {
            width: 100vw;
            height: 100vh;
            padding: 15px;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: auto 1fr 1fr auto;
            gap: 15px;
        }

        /* 顶部标题栏 */
        .header {
            grid-column: 1 / -1;
            background: rgba(0, 50, 100, 0.3);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 15px 30px;
            border: 1px solid rgba(0, 150, 255, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: fadeInDown 1s ease-out;
        }

        .header h1 {
            font-size: 2.2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            background: linear-gradient(45deg, #00d4ff, #0099ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .update-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .update-time {
            background: rgba(0, 150, 255, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid rgba(0, 150, 255, 0.4);
            font-size: 0.9em;
        }

        /* 核心指标展示 */
        .metrics-row {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
        }

        .metric-card {
            background: rgba(0, 50, 100, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid rgba(0, 150, 255, 0.3);
            text-align: center;
            position: relative;
            overflow: hidden;
            animation: fadeInUp 1s ease-out;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .metric-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 150, 255, 0.3);
        }

        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #00d4ff, #0099ff);
        }

        .metric-value {
            font-size: 2.5em;
            font-weight: bold;
            margin: 10px 0;
            color: #00d4ff;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
        }

        .metric-label {
            font-size: 0.9em;
            opacity: 0.9;
            margin-bottom: 5px;
        }

        .metric-change {
            font-size: 0.8em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .metric-up {
            color: #ff6b6b;
        }

        .metric-down {
            color: #6bcf7f;
        }

        /* 中心区域 */
        .center-left {
            background: rgba(0, 50, 100, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid rgba(0, 150, 255, 0.3);
            animation: fadeInLeft 1s ease-out;
        }

        .center-right {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .chart-container {
            background: rgba(0, 50, 100, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid rgba(0, 150, 255, 0.3);
            animation: fadeInRight 1s ease-out;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .chart-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: #00d4ff;
            text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
        }

        .chart {
            flex: 1;
            min-height: 0;
        }

        /* 右侧区域 */
        .right-panel {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* 底部趋势区 */
        .trends-section {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        /* 控制面板 */
        .controls {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 50, 100, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 15px;
            border: 1px solid rgba(0, 150, 255, 0.3);
            z-index: 1000;
            display: flex;
            gap: 10px;
        }

        .control-btn {
            background: rgba(0, 150, 255, 0.2);
            border: 1px solid rgba(0, 150, 255, 0.4);
            color: #fff;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .control-btn:hover {
            background: rgba(0, 150, 255, 0.4);
            transform: translateY(-2px);
        }

        /* 动画效果 */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- 顶部标题栏 -->
        <div class="header">
            <h1>🏥 香港疫情实时监控大屏</h1>
            <div class="update-info">
                <div class="update-time">
                    数据更新时间: <span id="updateTime"></span>
                </div>
            </div>
        </div>

        <!-- 核心指标展示 -->
        <div class="metrics-row">
            <div class="metric-card">
                <div class="metric-label">今日新增确诊</div>
                <div class="metric-value" id="todayConfirmed">0</div>
                <div class="metric-change metric-up">
                    <span>↑</span>
                    <span>+0%</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">累计确诊总数</div>
                <div class="metric-value" id="totalConfirmed">0</div>
                <div class="metric-change metric-up">
                    <span>↑</span>
                    <span>+0%</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">当前活跃病例</div>
                <div class="metric-value" id="activeCases">0</div>
                <div class="metric-change metric-down">
                    <span>↓</span>
                    <span>-0%</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">累计康复人数</div>
                <div class="metric-value" id="totalRecovered">0</div>
                <div class="metric-change metric-up">
                    <span>↑</span>
                    <span>+0%</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">累计死亡人数</div>
                <div class="metric-value" id="totalDeaths">0</div>
                <div class="metric-change">
                    <span>→</span>
                    <span>0%</span>
                </div>
            </div>
        </div>

        <!-- 中心区域左侧：地理分布图 -->
        <div class="center-left">
            <div class="chart-title">🗺️ 香港地区疫情热力图</div>
            <div id="mapChart" class="chart"></div>
        </div>

        <!-- 中心区域右侧上部：每日新增与累计确诊 -->
        <div class="center-right">
            <div class="chart-container">
                <div class="chart-title">📈 每日新增与累计确诊趋势</div>
                <div id="trendChart" class="chart"></div>
            </div>

            <!-- 各区域疫情对比 -->
            <div class="chart-container">
                <div class="chart-title">🏘️ 各区域疫情对比</div>
                <div id="regionChart" class="chart"></div>
            </div>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
            <!-- 风险预警看板 -->
            <div class="chart-container">
                <div class="chart-title">⚠️ 风险等级分布</div>
                <div id="riskChart" class="chart"></div>
            </div>

            <!-- 关键指标预警 -->
            <div class="chart-container">
                <div class="chart-title">🚨 高风险区域</div>
                <div id="warningChart" class="chart"></div>
            </div>
        </div>

        <!-- 底部趋势区 -->
        <div class="trends-section">
            <!-- 增长率变化曲线 -->
            <div class="chart-container">
                <div class="chart-title">📊 增长率变化趋势</div>
                <div id="growthChart" class="chart"></div>
            </div>

            <!-- 活跃病例趋势 -->
            <div class="chart-container">
                <div class="chart-title">📉 活跃病例趋势</div>
                <div id="activeTrendChart" class="chart"></div>
            </div>
        </div>
    </div>

    <!-- 控制面板 -->
    <div class="controls">
        <button class="control-btn" onclick="changeTimeRange('7d')">7天</button>
        <button class="control-btn" onclick="changeTimeRange('30d')">30天</button>
        <button class="control-btn" onclick="changeTimeRange('90d')">90天</button>
        <button class="control-btn" onclick="exportData()">导出数据</button>
    </div>

    <script>
        // 真实数据
        const chartData = {"dates": ["2022-01-01", "2022-01-02", "2022-01-03", "2022-01-04", "2022-01-05", "2022-01-06", "2022-01-07", "2022-01-08", "2022-01-09", "2022-01-10", "2022-01-11", "2022-01-12", "2022-01-13", "2022-01-14", "2022-01-15", "2022-01-16", "2022-01-17", "2022-01-18", "2022-01-19", "2022-01-20", "2022-01-21", "2022-01-22", "2022-01-23", "2022-01-24", "2022-01-25", "2022-01-26", "2022-01-27", "2022-01-28", "2022-01-29", "2022-01-30", "2022-01-31", "2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05", "2022-02-06", "2022-02-07", "2022-02-08", "2022-02-09", "2022-02-10", "2022-02-11", "2022-02-12", "2022-02-13", "2022-02-14", "2022-02-15", "2022-02-16", "2022-02-17", "2022-02-18", "2022-02-19", "2022-02-20", "2022-02-21", "2022-02-22", "2022-02-23", "2022-02-24", "2022-02-25", "2022-02-26", "2022-02-27", "2022-02-28", "2022-03-01", "2022-03-02", "2022-03-03", "2022-03-04", "2022-03-05", "2022-03-06", "2022-03-07", "2022-03-08", "2022-03-09", "2022-03-10", "2022-03-11", "2022-03-12", "2022-03-13", "2022-03-14", "2022-03-15", "2022-03-16", "2022-03-17", "2022-03-18", "2022-03-19", "2022-03-20", "2022-03-21", "2022-03-22", "2022-03-23", "2022-03-24", "2022-03-25", "2022-03-26", "2022-03-27", "2022-03-28", "2022-03-29", "2022-03-30", "2022-03-31", "2022-04-01", "2022-04-02", "2022-04-03", "2022-04-04", "2022-04-05", "2022-04-06", "2022-04-07", "2022-04-08", "2022-04-09", "2022-04-10", "2022-04-11", "2022-04-12", "2022-04-13", "2022-04-14", "2022-04-15", "2022-04-16", "2022-04-17", "2022-04-18", "2022-04-19", "2022-04-20", "2022-04-21", "2022-04-22", "2022-04-23", "2022-04-24", "2022-04-25", "2022-04-26", "2022-04-27", "2022-04-28", "2022-04-29", "2022-04-30", "2022-05-01", "2022-05-02", "2022-05-03", "2022-05-04", "2022-05-05", "2022-05-06", "2022-05-07", "2022-05-08", "2022-05-09", "2022-05-10", "2022-05-11", "2022-05-12", "2022-05-13", "2022-05-14", "2022-05-15", "2022-05-16", "2022-05-17", "2022-05-18", "2022-05-19", "2022-05-20", "2022-05-21", "2022-05-22", "2022-05-23", "2022-05-24", "2022-05-25", "2022-05-26", "2022-05-27", "2022-05-28", "2022-05-29", "2022-05-30", "2022-05-31", "2022-06-01", "2022-06-02", "2022-06-03", "2022-06-04", "2022-06-05", "2022-06-06", "2022-06-07", "2022-06-08", "2022-06-09", "2022-06-10", "2022-06-11", "2022-06-12", "2022-06-13", "2022-06-14", "2022-06-15", "2022-06-16", "2022-06-17", "2022-06-18", "2022-06-19", "2022-06-20", "2022-06-21", "2022-06-22", "2022-06-23", "2022-06-24", "2022-06-25", "2022-06-26", "2022-06-27", "2022-06-28", "2022-06-29"], "newConfirmed": [6, 7, 9, 13, 11, 14, 22, 23, 22, 31, 30, 35, 47, 32, 39, 60, 62, 93, 81, 80, 162, 133, 157, 122, 168, 211, 173, 263, 233, 268, 268, 446, 345, 289, 449, 306, 441, 267, 335, 489, 555, 511, 492, 481, 365, 447, 476, 637, 561, 338, 552, 474, 439, 563, 597, 579, 401, 446, 501, 556, 418, 444, 359, 353, 545, 605, 479, 600, 553, 466, 597, 762, 607, 845, 323, 835, 771, 754, 864, 541, 907, 1073, 1368, 997, 980, 1104, 1521, 1432, 1253, 1609, 1545, 1874, 1395, 1564, 1587, 1250, 1916, 1944, 1884, 1823, 1390, 1796, 1843, 1671, 1934, 2162, 2752, 2060, 2080, 1932, 1195, 1903, 1906, 2759, 1741, 1876, 1712, 1285, 1998, 1811, 1761, 1199, 1806, 974, 1450, 1786, 951, 1004, 1102, 926, 677, 949, 703, 934, 667, 1028, 638, 684, 826, 523, 713, 850, 455, 695, 709, 788, 522, 520, 800, 788, 804, 844, 703, 877, 914, 762, 1253, 1024, 729, 1103, 798, 1163, 1250, 853, 1221, 1107, 1184, 1390, 945, 830, 786, 780, 890, 933, 887, 938, 770, 941, 653, 1002], "totalConfirmed": [4, 6, 10, 14, 16, 20, 25, 31, 36, 42, 48, 55, 61, 68, 72, 80, 90, 103, 116, 126, 147, 165, 190, 209, 236, 270, 298, 340, 376, 417, 458, 527, 579, 622, 690, 736, 802, 841, 890, 961, 1042, 1118, 1191, 1263, 1317, 1384, 1456, 1553, 1638, 1689, 1772, 1844, 1910, 1995, 2087, 2177, 2239, 2307, 2383, 2467, 2530, 2596, 2649, 2701, 2782, 2872, 2943, 3033, 3115, 3184, 3272, 3383, 3471, 3592, 3638, 3756, 3864, 3968, 4088, 4164, 4292, 4444, 4636, 4775, 4913, 5068, 5281, 5484, 5661, 5889, 6108, 6373, 6572, 6796, 7022, 7200, 7475, 7752, 8023, 8282, 8481, 8735, 8997, 9234, 9505, 9805, 10187, 10472, 10758, 11027, 11194, 11460, 11725, 12104, 12349, 12617, 12860, 13043, 13329, 13587, 13837, 14006, 14259, 14394, 14597, 14847, 14980, 15120, 15274, 15403, 15498, 15631, 15729, 15859, 15952, 16095, 16184, 16280, 16395, 16468, 16568, 16687, 16750, 16847, 16946, 17055, 17127, 17199, 17310, 17419, 17530, 17646, 17743, 17864, 17995, 18105, 18286, 18434, 18539, 18698, 18813, 18980, 19160, 19282, 19457, 19616, 19785, 19985, 20120, 20239, 20352, 20464, 20591, 20724, 20851, 20985, 21095, 21230, 21323, 21466], "activeCases": [6, 13, 22, 35, 46, 60, 82, 105, 127, 158, 166, 171, 181, 188, 199, 210, 218, 229, 240, 251, 261, 276, 295, 309, 329, 347, 363, 381, 393, 416, 443, 468, 501, 518, 555, 583, 603, 618, 633, 665, 694, 738, 781, 806, 843, 877, 908, 944, 992, 1020, 1065, 1096, 1126, 1173, 1223, 1269, 1295, 1312, 1349, 1378, 1419, 1455, 1486, 1504, 1540, 1581, 1611, 1649, 1676, 1714, 1756, 1824, 1868, 1904, 1922, 1954, 1997, 2042, 2103, 2143, 2217, 2276, 2367, 2401, 2472, 2516, 2631, 2705, 2782, 2880, 2999, 3075, 3181, 3247, 3307, 3426, 3544, 3612, 3633, 3748, 3803, 3821, 3916, 4016, 4135, 4244, 4433, 4560, 4607, 4729, 4807, 4872, 4956, 5123, 5223, 5373, 5473, 5552, 5618, 5702, 5777, 5839, 5960, 6024, 6091, 6144, 6178, 6270, 6365, 6396, 6448, 6485, 6504, 6553, 6595, 6636, 6671, 6728, 6806, 6842, 6883, 6940, 6960, 7011, 7044, 7093, 7130, 7171, 7211, 7283, 7306, 7334, 7373, 7423, 7471, 7516, 7566, 7604, 7647, 7714, 7726, 7793, 7890, 7935, 7985, 8002, 8071, 8128, 8199, 8235, 8275, 8293, 8348, 8392, 8453, 8501, 8550, 8627, 8673, 8751], "newRecovered": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 22, 30, 37, 25, 28, 49, 54, 82, 70, 69, 152, 118, 138, 108, 148, 193, 157, 245, 221, 245, 241, 421, 312, 272, 412, 278, 421, 252, 320, 457, 526, 467, 449, 456, 328, 413, 445, 600, 513, 310, 507, 443, 409, 516, 547, 533, 375, 429, 464, 527, 377, 408, 328, 335, 509, 564, 449, 561, 526, 428, 554, 692, 563, 807, 305, 800, 727, 709, 801, 501, 830, 1009, 1270, 959, 906, 1055, 1398, 1349, 1169, 1501, 1417, 1786, 1280, 1491, 1516, 1126, 1785, 1863, 1851, 1696, 1326, 1767, 1735, 1562, 1801, 2039, 2543, 1919, 2019, 1797, 1112, 1825, 1809, 2571, 1630, 1715, 1601, 1198, 1918, 1715, 1675, 1131, 1674, 905, 1375, 1721, 913, 910, 1002, 891, 624, 907, 683, 881, 624, 983, 603, 627, 747, 487, 672, 791, 435, 644, 676, 737, 485, 479, 757, 714, 778, 812, 664, 824, 862, 715, 1197, 981, 685, 1031, 783, 1090, 1147, 805, 1166, 1085, 1109, 1324, 870, 790, 744, 760, 832, 884, 823, 887, 721, 860, 607, 920], "totalRecovered": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 13, 18, 24, 28, 37, 46, 60, 71, 83, 107, 125, 147, 163, 186, 217, 244, 285, 321, 356, 396, 466, 512, 551, 609, 650, 717, 753, 800, 866, 937, 1010, 1073, 1141, 1189, 1246, 1309, 1398, 1477, 1526, 1598, 1666, 1724, 1797, 1885, 1972, 2032, 2101, 2173, 2254, 2310, 2377, 2424, 2477, 2548, 2632, 2693, 2784, 2867, 2934, 3022, 3123, 3209, 3334, 3375, 3495, 3604, 3699, 3808, 3875, 3987, 4139, 4328, 4458, 4588, 4735, 4917, 5127, 5291, 5509, 5713, 5949, 6128, 6338, 6544, 6704, 6961, 7217, 7494, 7726, 7928, 8155, 8403, 8644, 8917, 9199, 9541, 9817, 10080, 10317, 10478, 10746, 11019, 11346, 11557, 11819, 12037, 12203, 12489, 12745, 12991, 13153, 13390, 13505, 13703, 13939, 14073, 14196, 14339, 14459, 14540, 14676, 14777, 14898, 14979, 15104, 15191, 15279, 15384, 15448, 15551, 15670, 15732, 15823, 15925, 16023, 16091, 16158, 16273, 16375, 16486, 16596, 16696, 16811, 16936, 17034, 17212, 17358, 17451, 17595, 17702, 17841, 18005, 18122, 18286, 18451, 18596, 18799, 18918, 19030, 19139, 19245, 19369, 19500, 19612, 19731, 19841, 19971, 20053, 20184], "totalDeaths": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 4, 4, 5, 5, 6, 7, 7, 7, 7, 8, 9, 10, 11, 12, 13, 14, 16, 17, 19, 21, 23, 25, 26, 28, 29, 31, 33, 36, 38, 40, 42, 45, 47, 50, 52, 55, 57, 60, 62, 63, 65, 67, 71, 73, 75, 77, 79, 82, 84, 86, 87, 89, 90, 92, 94, 95, 96, 97, 98, 99, 100, 101, 102, 102, 103, 103, 103, 104, 104, 104, 105, 105, 105, 105, 106, 106, 106, 107, 108, 109, 110, 110, 111, 112, 113, 114, 115, 115, 116, 117, 118, 120, 121, 122, 123, 124, 126, 127, 128, 129, 130, 131, 132, 133, 134, 134, 135, 135, 136], "regions": ["九龙城区", "油尖旺区", "深水埗区", "黄大仙区", "观塘区", "湾仔区", "中西区", "东区", "沙田区", "大埔区", "西贡区", "南区", "北区", "屯门区", "元朗区", "葵青区", "荃湾区", "离岛区"], "regionConfirmed": [21466, 21310, 17225, 16711, 16334, 11996, 11950, 9499, 6050, 3617, 3116, 2930, 2158, 1778, 1758, 1400, 1230, 0], "regionNewConfirmed": [143, 137, 114, 115, 113, 76, 77, 60, 41, 24, 20, 18, 15, 14, 13, 12, 10, 0], "riskLevels": ["低风险", "中风险", "高风险"], "riskCounts": [2655, 572, 13], "stats": {"totalConfirmed": 21466, "newConfirmed": 1002, "totalDeaths": 136, "activeCases": 8751, "totalRecovered": 20184, "totalRegions": 18, "latestDate": "2022-06-29"}};

        // 计算增长率
        const growthRates = [0, 16.7, 28.6, 44.4, -15.4, 27.3, 57.1, 4.5, -4.3, 40.9, -3.2, 16.7, 34.3, -31.9, 21.9, 53.8, 3.3, 50.0, -12.9, -1.2, 102.5, -17.9, 18.0, -22.3, 37.7, 25.6, -18.0, 52.0, -11.4, 15.0, 0.0, 66.4, -22.6, -16.2, 55.4, -31.8, 44.1, -39.5, 25.5, 46.0, 13.5, -7.9, -3.7, -2.2, -24.1, 22.5, 6.5, 33.8, -11.9, -39.8, 63.3, -14.1, -7.4, 28.2, 6.0, -3.0, -30.7, 11.2, 12.3, 11.0, -24.8, 6.2, -19.1, -1.7, 54.4, 11.0, -20.8, 25.3, -7.8, -15.7, 28.1, 27.6, -20.3, 39.2, -61.8, 158.5, -7.7, -2.2, 14.6, -37.4, 67.7, 18.3, 27.5, -27.1, -1.7, 12.7, 37.8, -5.9, -12.5, 28.4, -4.0, 21.3, -25.6, 12.1, 1.5, -21.2, 53.3, 1.5, -3.1, -3.2, -23.8, 29.2, 2.6, -9.3, 15.7, 11.8, 27.3, -25.1, 1.0, -7.1, -38.1, 59.2, 0.2, 44.8, -36.9, 7.8, -8.7, -24.9, 55.5, -9.4, -2.8, -31.9, 50.6, -46.1, 48.9, 23.2, -46.8, 5.6, 9.8, -16.0, -26.9, 40.2, -25.9, 32.9, -28.6, 54.1, -37.9, 7.2, 20.8, -36.7, 36.3, 19.2, -46.5, 52.7, 2.0, 11.1, -33.8, -0.4, 53.8, -1.5, 2.0, 5.0, -16.7, 24.8, 4.2, -16.6, 64.4, -18.3, -28.8, 51.3, -27.7, 45.7, 7.5, -31.8, 43.1, -9.3, 7.0, 17.4, -32.0, -12.2, -5.3, -0.8, 14.1, 4.8, -4.9, 5.7, -17.9, 22.2, -30.6, 53.4];

        // 初始化所有图表
        function initAllCharts() {
            // 更新统计数据
            document.getElementById('todayConfirmed').textContent = chartData.stats.newConfirmed.toLocaleString();
            document.getElementById('totalConfirmed').textContent = chartData.stats.totalConfirmed.toLocaleString();
            document.getElementById('activeCases').textContent = chartData.stats.activeCases.toLocaleString();
            document.getElementById('totalRecovered').textContent = chartData.stats.totalRecovered.toLocaleString();
            document.getElementById('totalDeaths').textContent = chartData.stats.totalDeaths.toLocaleString();
            document.getElementById('updateTime').textContent = chartData.stats.latestDate;

            initTrendChart();
            initRegionChart();
            initRiskChart();
            initWarningChart();
            initGrowthChart();
            initActiveTrendChart();
            initMapChart();
        }

        // 1. 每日新增与累计确诊趋势图
        function initTrendChart() {
            const chart = echarts.init(document.getElementById('trendChart'));
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#00d4ff',
                    textStyle: { color: '#fff' }
                },
                legend: {
                    data: ['每日新增', '累计确诊'],
                    textStyle: { color: '#fff' },
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.dates,
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { 
                        color: '#fff',
                        rotate: 45,
                        interval: Math.floor(chartData.dates.length / 10)
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '每日新增',
                        position: 'left',
                        axisLine: { lineStyle: { color: '#00d4ff' } },
                        axisLabel: { color: '#fff' },
                        splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } }
                    },
                    {
                        type: 'value',
                        name: '累计确诊',
                        position: 'right',
                        axisLine: { lineStyle: { color: '#ff6b6b' } },
                        axisLabel: { color: '#fff' }
                    }
                ],
                series: [
                    {
                        name: '每日新增',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: chartData.newConfirmed,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00d4ff' },
                                { offset: 1, color: '#0099ff' }
                            ])
                        },
                        animationDelay: function (idx) {
                            return idx * 10;
                        }
                    },
                    {
                        name: '累计确诊',
                        type: 'line',
                        yAxisIndex: 1,
                        data: chartData.totalConfirmed,
                        smooth: true,
                        lineStyle: {
                            color: '#ff6b6b',
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                                { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
                            ])
                        },
                        animationDelay: function (idx) {
                            return idx * 10 + 100;
                        }
                    }
                ],
                animationEasing: 'elasticOut'
            };
            chart.setOption(option);
        }

        // 2. 各区域疫情对比图
        function initRegionChart() {
            const chart = echarts.init(document.getElementById('regionChart'));
            const sortedData = chartData.regions.map((region, index) => ({
                name: region,
                value: chartData.regionConfirmed[index]
            })).sort((a, b) => b.value - a.value);

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    textStyle: { color: '#fff' }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { color: '#fff' },
                    splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } }
                },
                yAxis: {
                    type: 'category',
                    data: sortedData.map(item => item.name),
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { color: '#fff' }
                },
                series: [{
                    type: 'bar',
                    data: sortedData,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            { offset: 0, color: '#00d4ff' },
                            { offset: 1, color: '#0099ff' }
                        ])
                    },
                    animationDelay: function (idx) {
                        return idx * 50;
                    }
                }],
                animationEasing: 'elasticOut'
            };
            chart.setOption(option);
        }

        // 3. 风险等级分布图
        function initRiskChart() {
            const chart = echarts.init(document.getElementById('riskChart'));
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    textStyle: { color: '#fff' }
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    data: chartData.riskLevels.map((level, index) => ({
                        name: level,
                        value: chartData.riskCounts[index]
                    })),
                    itemStyle: {
                        color: function(params) {
                            const colors = ['#6bcf7f', '#ffd93d', '#ff6b6b'];
                            return colors[params.dataIndex];
                        }
                    },
                    label: {
                        color: '#fff',
                        formatter: '{b}\n{c}个区域\n({d}%)'
                    },
                    animationType: 'expansion',
                    animationEasing: 'elasticOut'
                }]
            };
            chart.setOption(option);
        }

        // 4. 高风险区域图表
        function initWarningChart() {
            const chart = echarts.init(document.getElementById('warningChart'));
            const highRiskRegions = chartData.regions.slice(0, 5).map((region, index) => ({
                name: region,
                value: chartData.regionNewConfirmed[index],
                risk: index < 2 ? '高' : '中'
            }));

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    textStyle: { color: '#fff' }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: highRiskRegions.map(item => item.name),
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { 
                        color: '#fff',
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { color: '#fff' },
                    splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } }
                },
                series: [{
                    type: 'bar',
                    data: highRiskRegions.map(item => ({
                        value: item.value,
                        itemStyle: {
                            color: item.risk === '高' ? '#ff6b6b' : '#ffd93d'
                        }
                    })),
                    animationDelay: function (idx) {
                        return idx * 100;
                    }
                }],
                animationEasing: 'elasticOut'
            };
            chart.setOption(option);
        }

        // 5. 增长率变化趋势图
        function initGrowthChart() {
            const chart = echarts.init(document.getElementById('growthChart'));
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    textStyle: { color: '#fff' }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.dates,
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { 
                        color: '#fff',
                        rotate: 45,
                        interval: Math.floor(chartData.dates.length / 10)
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { 
                        color: '#fff',
                        formatter: '{value}%'
                    },
                    splitLine: { 
                        lineStyle: { color: 'rgba(0, 212, 255, 0.1)' }
                    }
                },
                series: [
                    {
                        name: '增长率',
                        type: 'line',
                        data: growthRates,
                        smooth: true,
                        lineStyle: {
                            color: '#00d4ff',
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
                                { offset: 1, color: 'rgba(0, 212, 255, 0.1)' }
                            ])
                        },
                        markLine: {
                            data: [{ yAxis: 0, name: '0线' }],
                            lineStyle: { color: '#ff6b6b', type: 'dashed' }
                        },
                        animationDelay: function (idx) {
                            return idx * 10;
                        }
                    }
                ],
                animationEasing: 'elasticOut'
            };
            chart.setOption(option);
        }

        // 6. 活跃病例趋势图
        function initActiveTrendChart() {
            const chart = echarts.init(document.getElementById('activeTrendChart'));
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    textStyle: { color: '#fff' }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.dates,
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { 
                        color: '#fff',
                        rotate: 45,
                        interval: Math.floor(chartData.dates.length / 10)
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#00d4ff' } },
                    axisLabel: { color: '#fff' },
                    splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } }
                },
                series: [
                    {
                        name: '活跃病例',
                        type: 'line',
                        data: chartData.activeCases,
                        smooth: true,
                        lineStyle: {
                            color: '#ffd93d',
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 217, 61, 0.3)' },
                                { offset: 1, color: 'rgba(255, 217, 61, 0.1)' }
                            ])
                        },
                        animationDelay: function (idx) {
                            return idx * 10;
                        }
                    }
                ],
                animationEasing: 'elasticOut'
            };
            chart.setOption(option);
        }

        // 7. 地图热力图（简化版，使用散点图模拟）
        function initMapChart() {
            const chart = echarts.init(document.getElementById('mapChart'));

            // 模拟香港各区的坐标数据
            const mapData = chartData.regions.map((region, index) => ({
                name: region,
                value: [
                    114.1 + Math.random() * 0.3, // 经度
                    22.2 + Math.random() * 0.3,   // 纬度
                    chartData.regionConfirmed[index]
                ]
            }));

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    textStyle: { color: '#fff' },
                    formatter: function(params) {
                        return `${params.name}<br/>累计确诊: ${params.value[2].toLocaleString()}`;
                    }
                },
                xAxis: {
                    type: 'value',
                    show: false,
                    min: 113.8,
                    max: 114.5
                },
                yAxis: {
                    type: 'value',
                    show: false,
                    min: 22.1,
                    max: 22.6
                },
                series: [{
                    type: 'scatter',
                    data: mapData,
                    symbolSize: function(data) {
                        return Math.sqrt(data[2]) * 2;
                    },
                    itemStyle: {
                        color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                            { offset: 0, color: 'rgba(255, 107, 107, 0.8)' },
                            { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
                        ]),
                        borderColor: '#ff6b6b',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}',
                        position: 'top',
                        color: '#fff',
                        fontSize: 10
                    },
                    animationDelay: function (idx) {
                        return idx * 100;
                    }
                }],
                animationEasing: 'elasticOut'
            };
            chart.setOption(option);
        }

        // 响应式调整
        window.addEventListener('resize', function() {
            const charts = [
                'trendChart', 'regionChart', 'riskChart', 
                'warningChart', 'growthChart', 'activeTrendChart', 'mapChart'
            ];
            charts.forEach(chartId => {
                const chart = echarts.getInstanceByDom(document.getElementById(chartId));
                if (chart) {
                    chart.resize();
                }
            });
        });

        // 控制功能
        function changeTimeRange(range) {
            console.log('切换时间范围:', range);
            // 这里可以根据时间范围重新加载数据
        }

        function exportData() {
            console.log('导出数据');
            // 这里可以实现数据导出功能
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(initAllCharts, 500);
        });
    </script>
</body>
</html>